<template>
	<vCommonPage type="1" title="医技预约">
		<div slot="customContent" class="content yjyy">
			<div class="flex  spaceBt">
				<div class="spactTitle">
					患者：{{$store.state.user.userinfo.patientName}}
				</div>
				<div class="spaceDqh">
					待预约：{{ToBeReservedList.length}}
				</div>
				<el-date-picker v-model="timeValue" class="elPicker" type="daterange" size="large" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" @change="dataChange">
				</el-date-picker>
			</div>
			<div class="typeChoseBox">
				<div :class="clickIndex == 0?'leftBox typeClick':'leftBox'" @click="clickOrdinaryBtn(0)">
					待预约
					<div v-if="clickIndex == 0" class="leftBoxBottom"></div>
				</div>
				<div :class="clickIndex == 1?'rhightBox typeClick':'rhightBox'" @click="clickOrdinaryBtn(1)">
					已预约
					<div v-if="clickIndex == 1" class="rhightBoxBottom"></div>
				</div>
				<div :class="clickIndex == 2?'rhightBox typeClick':'rhightBox'" @click="clickOrdinaryBtn(2)">
					历史检查
					<div v-if="clickIndex == 2" class="rhightBoxBottom"></div>
				</div>
			</div>

			<div class="tableBox" v-show="clickIndex == 0">
				<el-table class="table" :header-cell-style="$tableTitleStye" :cell-style="{color:'#435C7A'}"
					:data="ToBeReservedList" :show-overflow-tooltip="true">
					<el-table-column type="index" label="序号" width="80"></el-table-column>
					<el-table-column prop="billingTime" width="380" label="开单时间"></el-table-column>
					<el-table-column prop="itemName" label="项目名称"></el-table-column>
					<el-table-column prop="checkDept" label="检查科室"></el-table-column>
					<el-table-column width="220" label="操作">
						<template slot-scope="scope">
							<el-button @click="yy(scope.row)" :class="scope.row.status == 1?'yyBtn ':'yyBtn hui'"
								type="success" size="20">预约</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="tableBox" v-show="clickIndex == 1">
				<el-table class="table" :header-cell-style="$tableTitleStye" :cell-style="{color:'#435C7A'}"
					:data="reservedList" :show-overflow-tooltip="true">
					<el-table-column type="index" label="序号" width="80"></el-table-column>
					<el-table-column prop="billingTime" width="380" label="开单时间"></el-table-column>
					<el-table-column prop="itemName" width="170" label="项目名称"></el-table-column>
					<el-table-column prop="checkDept" width="150" label="检查科室"></el-table-column>
					<el-table-column prop="appointmentDate" width="380" label="预约时间"></el-table-column>
					<el-table-column width="220" label="操作">
						<template slot-scope="scope">
							<el-button @click="editTime(scope.row)"
								:class="scope.row.status == 1 && scope.row.isBiggerToday?'yyBtn ':'yyBtn hui'"
								style="width: 168px;" type="success" size="20">修改时间</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="tableBox" v-show="clickIndex == 2">
				<el-table class="table" :header-cell-style="$tableTitleStye" :cell-style="{color:'#435C7A'}"
					:data="historyList" :show-overflow-tooltip="true">
					<el-table-column type="index" label="序号" width="80"></el-table-column>
					<el-table-column prop="billingTime" width="380" label="开单时间"></el-table-column>
					<el-table-column prop="itemName" width="160" label="项目名称"></el-table-column>
					<el-table-column prop="checkDept" width="140" label="检查科室"></el-table-column>
					<el-table-column prop="checkDate" width="180" label="检查时间"></el-table-column>
					<el-table-column width="220" label="状态">
						<template slot-scope="scope">
							<!-- scope.row -->
							<span class="areadyCheck" v-if="scope.row.status == 1">已检查</span>
							<span class="noneCheck" v-if="scope.row.status == 0">已取消</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<transition name="el-fade-in-linear">
				<div v-show="tipBoxShow" class="tipBoxByZnYy">
					<div class="tipBoxTopClose el-icon-close" @click="closeTip()"></div>
					<div class="tipTitle">
						是否需要一键智能预约？
					</div>
					<div class="tipSecTitle">
						提示：将为您预约该项目当前最早号源
					</div>
					<div class="centerBox">
						<el-button class="centerBtnCancel" @click="cancel()">否</el-button>
						<el-button class="centerBtnMakeSure" @click="makeSure()">是</el-button>
					</div>
				</div>
			</transition>
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<div v-show="tipBoxShow||tipText" @click="hoddenBox()" class="yiny"></div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
	</vCommonPage>
</template>

<script>
	import moment from 'moment'
	import {
		getYjyyList
	} from "@api/apiBox/yjyy"
	export default {
		name: "yjyy",
		data() {
			return {
				clickIndex: 0,
				timeValue: '',
				//待预约
				ToBeReservedList: [],
				//已预约
				reservedList: [],
				//历史检查
				historyList: [],
				tipBoxShow: false,
				formData: {
					cardNo: this.$store.state.appointment.cardNo, //卡片编号
					cardType: this.$store.state.appointment.card.num, //卡片类别
					beginDate: "",
					endDate: "",
					patientId: this.$store.state.user.userinfo.patientId //患者ID
				},
				tipText: ''
			}
		},
		methods: {
			clickOrdinaryBtn(index) {
				this.clickIndex = index;
			},
			dataChange(date) {
				console.log(date)
				let startDate = moment(date[0]).format('YYYY-MM-DD');
				let endDate = moment(date[0]).format('YYYY-MM-DD');
				console.log(startDate, '---', startDate)
				this.$store.dispatch("yjyy/updateBeginDate", startDate); //保存医技预约科室开始时间
				this.$store.dispatch("yjyy/updateEndDate", endDate); //保存医技预约科室结束时间
				this.formData.beginDate = startDate;
				this.formData.endDate = endDate;
				this.getDataAndMakeData();
			},
			hoddenBox() {
				this.tipBoxShow = false;
				this.tipText = "";
			},
			closeTip() {
				this.tipBoxShow = false;
				this.$store.dispatch("yjyy/updateToBeReservedItem", ""); //医技预约带预约数据
			},
			cancel() {
				this.$router.push({
					name: 'yjyyChoseDate',
					query: {
						type: 0
					}
				})
			},
			yy(data) {
				//不可预约
				if (data.status == 0) {
					this.tipText = data.itemName + '项目暂时无法通过自助机修改预约时间，请到相应科室导诊台进行修改';
				} else if (data.status == 1) {
					this.tipBoxShow = true;
					this.$store.dispatch("yjyy/updateToBeReservedItem", data); //医技预约带预约数据存储
				}
			},
			makeSure() {
				this.$router.push({
					name: 'yjyyChoseDate',
					query: {
						type: 1
					}
				})
			},
			//获取数据和数据组装
			async getDataAndMakeData() {
				let data = {
					data: this.formData,
					that: this
				}
				const res = await getYjyyList(data);
				//ToBeReservedList待预约 reservedList 已预约  historyList 历史
				this.ToBeReservedList = res.data.ToBeReservedList;
				this.reservedList = res.data.reservedList;
				for (let item of this.reservedList) {
					if (!this.isBiggerToday(item.appointmentDate + " 00:00:00")) {
						item.isBiggerToday = false;
					} else {
						item.isBiggerToday = true;
					}
				}
				this.historyList = res.data.historyList;
				console.log('获取医技预约数据', this.reservedList)
			},
			//获取医技预约数据 初始信息加载
			getListData() {
				this.formData = {
					cardNo: this.$store.state.appointment.cardNo, //卡片编号
					cardType: this.$store.state.appointment.card.num, //卡片类别
					beginDate: "",
					endDate: "",
					patientId: this.$store.state.user.userinfo.patientId //患者ID
				};
				this.getDataAndMakeData()
			},
			//修改时间按钮
			editTime(data) {
				console.log(data.appointmentDate)
				if (!data.isBiggerToday) {
					this.tipText = '无法修改预约时间为当天及之前的检查项目，请到人工窗口进行咨询';
					return;
				}
				if (data.status == 0) {
					this.tipText = data.itemName + '项目暂时无法通过自助机修改预约时间，请到相应科室导诊台进行修改';
				} else if (data.status == 1) {
					this.$store.dispatch("yjyy/updateToBeReservedItem", data); //医技预约修改预约数据存储
					let date = data.appointmentDate
					this.$router.push({
						name: 'yjyyChoseDate',
						query: {
							type: 2,
							date: date
						}
					})
				}
			},
			clearStore() {
				this.$store.dispatch("yjyy/updateBeginDate", ""); //医技预约科室开始时间
				this.$store.dispatch("yjyy/updateEndDate", ""); //医技预约科室结束时间
				this.$store.dispatch("yjyy/updateToBeReservedItem", ""); //医技预约带预约数据
				this.$store.dispatch("yjyy/updateAppointmentDate", ""); //医技预约科室预约时间
				this.$store.dispatch("yjyy/updatePrintData", ""); //医技预约科室预约打印内容
			},
			isBiggerToday(date) {
				var oDate1 = new Date(date);
				var oDate2 = new Date();
				if (oDate1.getTime() > oDate2.getTime()) {
					return true;
				} else {
					return false;
				}
			}
		},
		created() {
			//清空缓存
			this.clearStore();
			this.getListData();
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.typeChoseBox {
		display: flex;
		justify-content: center;
		font-size: 3vw;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #435C7A;
		margin-top: 70px;
	}

	.leftBox {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A5B0BD;
		width: 30%;
		text-align: center;
	}

	.typeClick {
		font-size: 32px;
		font-family: Source Han Sans CN !important;
		font-weight: bold !important;
		color: #435C7A !important;
	}

	.leftBoxBottom::after {
		content: '';
		width: 77px;
		height: 8px;
		border-radius: 4px;
		display: block;
		margin: 0 auto;
		height: 6px;
		background: #46C349;
		margin-top: 10px;
	}

	.rhightBoxBottom::after {
		content: '';
		width: 77px;
		height: 8px;
		border-radius: 4px;
		display: block;
		margin: 0 auto;
		height: 6px;
		background: #46C349;
		margin-top: 10px;
	}

	.rhightBox {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A5B0BD;
		width: 30%;
		text-align: center;
	}

	.blue {
		color: #57A8FF;
	}

	.tableBox {
		margin-top: 20px;
		height: 520px;
		padding: 10px;
		padding-top: 0px;
		overflow-y: auto;
		overflow-x: hidden;
		scroll-behavior: smooth;
		border-radius: 8px;
		overscroll-behavior: contain;
		border-radius: 8px 8px 0px 0px;
	}

	.areadyCheck {
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #46C349;
	}

	.noneCheck {
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FE5F5F;
	}

	.mrR {
		margin-right: 600px;
	}

	.marl {
		margin-left: 590px !important;
	}

	.spaceBt {
		position: fixed;
		top: 1090px;
		left: 0px;
		border: solid 1px #FFFFFF;
		width: 100%;
		height: 66px;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding-bottom: 10px;

		.spactTitle {
			margin-left: 56px;
			font-size: 2.75rem;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
		}

		.spaceDqh {
			font-size: 2.75rem;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			margin-left: 110px;
		}

		.elPicker {
			width: 453px;
			height: 60px;
			margin-left: 94px;
			background: rgba(234, 244, 249, 0.61);
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	}

	.yyBtn {
		width: 100px;
		height: 60px;
		background: #46C349;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.hui {
		background: #D7DEE3;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		color: #435C7A;
	}

	.tipBoxByZnYy {
		position: absolute;
		left: 262px;
		top: 232px;
		width: 556px;
		height: 324px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 6px;
		z-index: 3;
	}

	.tipBoxTopClose {
		position: absolute;
		right: 0px;
		width: 50px;
		height: 50px;
		background: #57A8FF;
		border-radius: 6px;
		font-size: 30px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tipTitle {
		width: 100%;
		margin-top: 73px;
		text-align: center;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.tipSecTitle {
		text-align: center;
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #AAB5C1;
		margin-top: 32px;
	}

	.centerBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 32px;

		.centerBtnCancel {
			width: 150px;
			height: 70px;
			background: #D7DEE3;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			margin-right: 20px;
		}

		.centerBtnMakeSure {
			width: 150px;
			height: 70px;
			background: #46C349;
			border: 2px solid #46C349;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>

<style>
	.yjyy .el-range-input {
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		background: #EAF4F9;
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yjyy .el-input__icon {
		width: 53px;
		background: #EAF4F9;
	}

	.yjyy .el-range-separator {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #EAF4F9;
	}

	.yjyy .el-range-editor.el-input__inner {
		padding: 3px 0px;
	}

	.yjyy .el-range-separator {
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.yjyy .el-date-editor .el-range__icon {
		font-size: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 17px;
		color: #57A8FF;
	}

	.yjyy .el-date-editor .el-range__close-icon {
		font-size: 29px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #57A8FF;
	}

	.yjyy .el-range-editor.is-active,
	.el-range-editor.is-active:hover {
		border: none;
	}

	.yjyy .tipText {
		width: 80%;
	}
</style>
